<template>

<div>
    <mt-header title="萌宠之家">
        <div slot="right" class="rightslot"><router-link to="/reg"> 注册</router-link></div>
    </mt-header>
    <!--表单组件  -->
    <mt-field v-model="uname" type="text" placeholder="请输入你的用户名" :state="userstate" @blur.native.capture="checkUsername"  style="margin-top:43px"></mt-field>
    <mt-field v-model="upwd" type="password" placeholder="请输入你的密码" :state="pwdstate" @blur.native.capture="checkPassword"></mt-field>
    <mt-button size="large" type="primary" @click="checkForm">确认登录</mt-button>
    </div>
</template>
<script>
	export default {
		data() {
			return {
				uname: '',
				upwd: '',
				userstate: '',
				pwdstate: '',
				login: []
			}
		},
		methods: {
			checkUsername() {
				let regexp = /^\w{6,15}/;
				if (regexp.test(this.uname)) {
					this.userstate = "success"
					return true;
				} else {
					this.userstate = "error";
					return false;
				}
			},
			checkPassword() {
				let regexp = /^\d{6}$/;
				if (regexp.test(this.upwd)) {
					this.pwdstate = "success"
					return true;
				} else {
					this.pwdstate = "error"
					return false;
				}
			},
			checkForm(){
            if (this.checkUsername()&&this.checkPassword()) {
                this.axios.post('/user/login',`uname=${this.uname}&upwd=${this.upwd}`).then(res=>{
                if(res.data.code==200){
                    alert("登录成功");
                    //修改vuex中状态信息
										var userInfo=res.data.result;
                    this.$store.commit('loginSuccess',userInfo);
										//把当前登录状态存入sessionStorage
                    var ss=window.sessionStorage;
                    ss.setItem('islogin',1)//已登录
                    ss.setItem('userInfo',JSON.stringify(userInfo))//存入用户完整数据
										//跳转回首页
                    this.$router.push('/');  
                }else{
                    alert("登录失败，用户名或密码错误");
                }
     
        })
                
            }   
        }
				}
			}
</script>
<style scoped>
.rightslot a{
 text-decoration: none;
 color: #fff;
}
mt-header{
  position: absolute;
  top:50px;
}
</style>